<template>
  <div>
    <div class="set-bind">
      <h4 class="set-user">微信用户<span>骆驼祥子</span>你好!</h4>
      <div class="set-pro">
        <p>一个"建工社"账户将可以同步享受网站、微网站和app三种服务</p>
        <p>1、如果你已经有一个"建工社"网站账户,请直接登录绑定</p>
        <p>2、如果没有,请重新注册一个</p>
        <p>3、兑换建工社增值服务前,必须有一个建工社账户</p>
      </div>
    </div>
    <div class="set-bind-acc">
      <div class="set-bind-acc-tab">
        <span :class="{active:isShow}" @click="isShow = true">已有建工社账号</span>
        <span :class="{active:!isShow}" @click="isShow = false">新用户</span>
      </div>
      <!-- 已有建工社账号 -->
      <div class="set-bind-have" v-if="isShow">
        <ul>
          <li>
            <i></i><input type="text" v-model="userName" placeholder="建工社网站账号">
          </li>
          <li>
            <i></i><input type="password" v-model="userPassword" placeholder="密码">
          </li>
        </ul>
        <div v-if="isError" class="public-cuowu">{{ errorText }}</div>
        <div class="set-bind-btn">
          <button class="set-btn" @click="handleClick">注册</button>
          <!-- <button class="set-btn" @click="handleClick">登录并绑定</button> -->
        </div>
      </div>
      <!-- 新用户 -->
      <div class="set-bind-have" v-else>
        <ul>
          <li>
            <i></i><input type="text" v-model="regFrom.userName" placeholder="用户名只能6-15位的数字和字母组合">
          </li>
          <li>
            <i></i><input type="text" v-model="regFrom.userPass" placeholder="密码长度6-16,由数字,字母组成">
          </li>
          <li>
            <i></i><input type="text" v-model="regFrom.userPass1" placeholder="确认密码">
          </li>
          <li>
            <i></i><input type="text" v-model="regFrom.mobile" placeholder="请输入您的手机号">
          </li>
          <li>
            <i></i><input type="text" v-model="regFrom.verificationCode" placeholder="请输入验证码"><span class="msgs">获取验证码</span>
          </li>
        </ul>
        <div class="public-cuowu">{{ errorText }}</div>
        <div class="set-bind-btn">
          <button class="set-btn" @click="handleClickReg">注册</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { register } from '@/api/user.js'
export default {
  name: 'Login',
  data() {
    return {
      isShow: true,
      userName: '',
      userPassword: '',
      errorText: '',
      isError: false,
      regFrom: {
        userName: '',
        userPass: '',
        userPass1: '',
        mobile: '',
        verificationCode: ''
      }
    }
  },
  created() {
    // console.log(this.$store.state.token)
    // this.getPurposeList()
  },
  computed: {
  },
  methods: {
    // getPurposeList(){
    //   const params = {
    //     userId: '48E0655D-7407-4879-9B36-51BA2A54BB29'
    //   }
    //   getPurposeList(params).then(res => {
    //     console.log(res)
    //   })
    // },
    handleClick() {
      if(!this.userName) {
        this.isError = true
        this.errorText = '*请输入用户名'
        return
      }
      if(!this.userPassword) {
        this.isError = true
        this.errorText = '*请输入密码'
        return
      }
      this.isError = false
      const params = {
        userName: this.userName,
        password: this.userPassword
      };
      this.$store.dispatch('Login', params)
        .then(res => {
          if (res.isSuccess) {
            this.$router.push({ path:'/' })
          }
        })
        .catch((error) => {
          console.log(error.response); 
        });
    },
    handleClickReg() {
      if(!this.regFrom.userName) {
        this.isError = true
        this.errorText = '*请输入用户名'
        return
      } else if(!this.regFrom.userPass) {
        this.isError = true
        this.errorText = '*请输入密码'
        return
      } else if(!this.regFrom.userPass1){
        this.isError = true
        this.errorText = '*请输入密码'
        return
      } else if(this.regFrom.userPass === this.regFrom.userPass1){
        this.isError = true
        this.errorText = '*密码不一致'
        return
      } else if(!this.regFrom.mobile){
        this.isError = true
        this.errorText = '*请输入手机号'
        return
      } else if(!this.regFrom.verificationCode){
        this.isError = true
        this.errorText = '*请输入验证码'
        return
      }
      this.isError = false
      const params = {
        userName: this.userName,
        password: this.userPassword,
        mobile: '',
        verificationCode: ''
      };
      register({ ...params })
        .then(res => {
          console.log(res)
        })
        .catch((error) => {
          console.log(error.response); 
        });
    }
  }
}
</script>

<style>
body{
  background: #f5f5f9;
}
</style>
<style lang="scss" scoped>
@import '@/styles/var.scss';
.set-bind{
  text-align: left;
  padding: 0 15px;
  background: #fff;
  margin-bottom: 10px;
  .set-user {
    color: #333;
    font: 15px/50px "";
    border-bottom: 1px solid #ededed;
    span{
      font-weight: bold;
    }
  }
  .set-pro {
    padding: 9px 0;
    p{
      margin-bottom: 10px;
      color: #666;
      font-size: 14px;
      line-height: 18px;
    }
  }
}
.set-bind-acc {
  .set-bind-acc-tab {
    display: flex;
    justify-content: center;
    background-color: #fff;
    padding: 12px 20px 0 20px;
    span {
      display: inline-block;
      width: 50%;
      box-sizing: border-box;
      text-align: center;
      font: 14px/40px "";
      color: #0094FB;
      border: 1px solid #0094fb;
      border-radius: 4px;
      &:first-child {
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
      }
      &:last-child {
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
      }
      &.active {
        background-color: #0094fb;
        color: #fff;
      }
    }
  }
  .set-bind-have{ 
    ul{
      padding: 0 20px 0 20px;
      background: #fff;
      margin-bottom: 0px;
      li{
        width: 100%;
        height: 50px;
        border-bottom: 1px solid #f0f0f0;
        display: flex;
        align-items: center;
        position: relative;
        &:last-child {
          border-bottom: 0;
        }
        input {
          width: 100%;
          border: 0;
          font-size: 16px;
          margin-left: 20px;
        }
        i {
          width: 20px;
          height: 24px;
          background: #f00;
          // background: url(../images/set/set-icon.png) no-repeat;
          background-size: 100%;
        }
        .msgs {
          padding: 5px 7px;
          white-space: nowrap;
          background-color: #0094FB;
          border-radius: 4px;
          color: #fff;
          position: absolute;
          right: 0;
          font-size: 12px;
        }
        .msgs1 {
          background-color: #c5c5c5;
        }
      }
    }
  }
  .public-cuowu {
    padding: 10px 15px;
    color: #f00;
    font-size: 14px;
    text-align: left;
  }
  .set-bind-btn{
    .set-btn {
      // display: block;
      width: 78%;
      height: 44px;
      background-color: #0094fb;
      border-radius: 44px;
      text-align: center;
      font: 15px/44px "";
      color: #fff;
      margin: 30px auto;
    }
  }
}
</style>